<template>
	<view class="page">


		<view class="pagetitle">团体标签</view>



<view  class="function">
<view  class="join"><u-button customStyle="background-color:#ffd91d" @click="join_tab"> 加入团体</u-button></view>
<view  class="apply"><u-button customStyle="background-color:#ffd91d"  @click="apply_tab"> 创建团体</u-button></view>
</view>



<view class="join-box" v-if="now_tab=='join'">
	
	<view>选择团体后，需要审核通过才能显示团体标签</view>
	<view class="content">有团体标签为审核中状态，将不能修改。</view>
	
		<u--form labelPosition="top" :labelStyle="{width: '300rpx'}" ref="uForm">

			<u-form-item label="所属团体1" borderBottom @click="choose_group_1()" ref="group_list">
				<u--input v-model="group_tag1" disabled disabledColor="#ffffff" placeholder="请选择团体"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

		    
		    <u-button @click="save_group_tags()" v-if="(group_tag1) && (group_tag1_status !='正常')"
		    		  :disabled="submit_lock"
		    		  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
		    </u-button>
		    
		    <u-button @click="save_group_tags()" v-else
		    		  :disabled="true"
		    		  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
		    </u-button>
			
			 
			<view style="height: 55rpx;"> </view>



			<u-form-item label="所属团体2" borderBottom @click="choose_group_2()" ref="group_list">
				<u--input v-model="group_tag2" disabled disabledColor="#ffffff" placeholder="请选择团体"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			
			<u-button @click="save_group_tags()" v-if="(group_tag2) && (group_tag2_status !='正常')"
					  :disabled="submit_lock"
					  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
			</u-button>
			
			<u-button @click="save_group_tags()" v-else
					  :disabled="true"
					  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
			</u-button>
			
			<view style="height: 55rpx;"> </view>
			
			
			
			
			

			<u-form-item label="所属团体3" borderBottom @click="choose_group_3()" ref="group_list">
				<u--input v-model="group_tag3" disabled disabledColor="#ffffff" placeholder="请选择团体"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>



			<u-button @click="save_group_tags()" v-if="(group_tag3) && (group_tag3_status !='正常')"
					  :disabled="submit_lock"
					  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
			</u-button>

			<u-button @click="save_group_tags()" v-else
					  :disabled="true"
					  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交
			</u-button>



			<u-popup :show="group_tag_01" mode="bottom">
				<view>
					<u-list>
						<view class="popup_group_box"> </view>
						<u-list-item v-for="(item, index) in group_list" :key="index" disabled="">
							<u-cell :title="`${item.name}`" @click="set_group_tag_01(item.nid,item.name)" > </u-cell>
						</u-list-item>
					</u-list>
					<view class="popup_group_box_function">
						<u-button text="取消" customStyle="background-color: #ffd91d"
							@click="close_group_list_box"></u-button>
					</view>
				</view>
			</u-popup>
			
			
			
			<u-popup :show="group_tag_02" mode="bottom">
				<view>
					<u-list>
						<view class="popup_group_box"> </view>
						<u-list-item v-for="(item, index) in group_list" :key="index">
							<u-cell :title="`${item.name}`" @click="set_group_tag_02(item.nid,item.name)"> </u-cell>
							</u-cell>
						</u-list-item>
					</u-list>
					<view class="popup_group_box_function">
						<u-button text="取消" customStyle="background-color: #ffd91d"
							@click="close_group_list_box"></u-button>
					</view>
				</view>
			</u-popup>
			
			
			<u-popup :show="group_tag_03" mode="bottom">
				<view>
					<u-list>
						<view class="popup_group_box"> </view>
						<u-list-item v-for="(item, index) in group_list" :key="index">
							<u-cell :title="`${item.name}`" @click="set_group_tag_03(item.nid,item.name)"> </u-cell>
						</u-list-item>
					</u-list>
					<view class="popup_group_box_function">
						<u-button text="取消" customStyle="background-color: #ffd91d"
							@click="close_group_list_box"></u-button>
					</view>
				</view>
			</u-popup>
		</u--form>
</view>



<view class="apply-box"  v-if="now_tab=='apply'">
	
		<view class="content">如果你有想创建的团体标签，可以在这里提交申请</view>
		
		<u--form labelPosition="top" :labelStyle="{width: '300rpx'}" ref="uForm">

			<u-form-item
				label="团体名称"
				borderBottom
			>
			<u--input
					v-model="group_name"
					border="none"
					:disabled="apply_lock"
			></u--input>
			</u-form-item>
			
			
			<u-button @click="apply_group_tag()" 
					  :disabled="apply_lock"
					  customStyle="background-color: #ffd91d;margin-top:35rpx;">提交</u-button>
		</u--form>
</view>









	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import * as Config from '@/utils/config.js'
	import * as groupApi from '@/api/group.js';


	export default {
		data() {
			return { 
				group_tag_01:false,
				group_tag_02:false,
				group_tag_03:false,
				group_tag_lock_01:false,
				group_tag_lock_02:false,
				group_tag_lock_03:false,
				//用于显示标签
				group_tag1:"",
				group_tag2:"",
				group_tag3:"",
				//用于显示标签提交
				group_tag1_nid:"",
				group_tag2_nid:"",
				group_tag3_nid:"",
				//用于判断状态
				group_tag1_status:"",
				group_tag2_status:"",
				group_tag3_status:"",
				group_list: [],
				member_group_tag: [],
				submit_lock:"",
				apply_lock:"",
				group_name:"",
				appling_group_tag:[],
				now_tab:"join"
				
			}
		},

		onLoad() {},

		onShow() {
			// 获取当前用户信息
			this.grouplist()
			this.get_member_group_tag()
			this.check_apply()
		},


		methods: {

			choose_group_1() {
				if(this.group_tag_lock_01==false)
				{
				   this.group_tag_01 = true	
				}
			},
			choose_group_2() {
				if(this.group_tag_lock_02==false)
				{
				   this.group_tag_02 = true	
				}
			},
			choose_group_3() {
				if(this.group_tag_lock_03==false)
				{
				   this.group_tag_03 = true	
				}
			},
			
			set_group_tag_01(id,name){
				console.log("id",id)
				this.group_tag_01 = false
				this.group_tag1   =name
				this.group_tag1_nid = id
			},
			set_group_tag_02(id,name){
				console.log("id",id)
				this.group_tag_02 = false
				this.group_tag2   =name
				this.group_tag2_nid = id
			},
			set_group_tag_03(id,name){
				console.log("id",id)
				this.group_tag_03 = false
				this.group_tag3   =name
				this.group_tag3_nid = id
			},
			
			
			
			//切换标签
			join_tab(){this.now_tab="join"},
			apply_tab(){this.now_tab="apply"},
			
			//关闭弹出层
			close_group_list_box() {
				this.group_tag_01 = false
				this.group_tag_02 = false
				this.group_tag_03 = false
			},
			
			//提交信息
			save_group_tags()
			{
				console.log(this.group_tag_lock_01)
				console.log(this.group_tag_lock_02)
				console.log(this.group_tag_lock_03)
			
	 
				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/save_group_tags.php',
					header: {
						Authorization: Config.getStorageUserId(),
					},
					data: {
						group_tag1: this.group_tag1_nid,
						group_tag1_status: this.group_tag1_status,
						group_tag2: this.group_tag2_nid,
						group_tag2_status: this.group_tag2_status,
						group_tag3: this.group_tag3_nid,
						group_tag3_status: this.group_tag3_status,
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						console.log("res", res.data)
						if(res.data.status==200)
						{
							uni.showToast({
							         title: "申请已提交，请耐心等候。",
									 duration: 3000,
							         position: 'bottom',
							         success: function (res) {
							           console.log('提示完毕，开始刷新本页res',res)									  
							         },
									 })
									 
							 setTimeout(function() { uni.reLaunch({url: '/pages/user/mygroup'})}, 2000); // 这里的 1000 表示延时的时间，单位是毫秒
						}
					}
				});
			},
			
			
			
			//申请标签
			apply_group_tag()
			{ 
				 
				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/apply_group_tag.php',
					header: {
						Authorization: Config.getStorageUserId(),
					},
					data: {
						group_name: this.group_name,
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						console.log("res", res.data)
						if(res.data.status==200)
						{
							uni.showToast({
							         title: "提交成功",
									 duration: 3000,
							         position: 'bottom',
							         success: function (res) {
							           console.log('提示完毕，开始刷新本页res',res)									  
							         },
									 })
									 //锁按钮
									 this.apply_lock="disabled"
						}
						if(res.data.status==300)
						{
							uni.showToast({
							         title: "请输入团体名称",
									 duration: 3000,
									 icon:'error',
							         position: 'bottom',
							         success: function (res) {
							           console.log('请输入团体名称',res)									  
							         },
									 })
									 
						}
					}
				});
			},
			
			
			

			grouplist() {
				console.log("grouplist")
				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/get_group_list.php',
					data: {
						page: this.page,
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						this.group_list = res.data.info
						console.log("this.group_list", this.group_list)
					}
				});
			
				
			},
			
			//获取这个人申请的标签
			check_apply() {
				console.log("获取这个人申请的标签")
				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/get_member_apply_tag.php',
					data: {
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						this.appling_group_tag= res.data.info
						console.log("appling_group_tag", this.appling_group_tag)
						
						 
						console.log("获取这个人申请的标签nid",this.appling_group_tag.nid) 
						//开始判断锁死
						if(this.appling_group_tag.nid.length>0)
						{
							//锁按钮
							console.log("锁")
							this.apply_lock="disabled"
							this.group_name=this.appling_group_tag.name
						}
							
					}
				});
			
			 
				
			},
			
			//获取个人的标签
			get_member_group_tag() {
				console.log("member_group_tag")
				uni.request({
					url: Config.baseUrl + '/api/miniapp/group/get_member_tags.php',
					data: {
						page: this.page,
						Authorization: Config.getStorageUserId(),
					},
					success: (res) => {
						this.member_group_tag = res.data.info
						console.log("this.member_group_tag", this.member_group_tag)
						
						if(typeof(this.member_group_tag[0]) != "undefined" && this.member_group_tag[0] != null)
						{
							this.group_tag1=this.member_group_tag[0]['name']+" ("+this.member_group_tag[0]['status']+")"
							this.group_tag1_status=this.member_group_tag[0]['status']
							
						}
						if(typeof(this.member_group_tag[1]) != "undefined" && this.member_group_tag[1] != null)
						{
						   this.group_tag2=this.member_group_tag[1]['name']+" ("+this.member_group_tag[1]['status']+")"
						   this.group_tag2_status=this.member_group_tag[1]['status']
						}
						if(typeof(this.member_group_tag[2]) != "undefined" && this.member_group_tag[2] != null)
						{
							this.group_tag3=this.member_group_tag[2]['name']+" ("+this.member_group_tag[2]['status']+")"
							this.group_tag3_status=this.member_group_tag[2]['status']
						}
						
					
						
						if(this.member_group_tag.length>2)
						{
							this.submit_lock="disabled"
						}
						
						//取好数据之后，开始控制标签显示
						this.control_select_box()
					},
					
				});
				
				
				
			
				
			}, 
			
			//控制是否开发选择标签
			control_select_box()
			{
				console.log("control_select_box")
				console.log(this.group_tag_lock_01)
				console.log(this.group_tag_lock_02)
				console.log(this.group_tag_lock_03)
				if(typeof(this.group_tag1) != "undefined" && this.group_tag1 != null && this.group_tag1 != "")
				{
					this.group_tag_lock_01=true
				}
				if(typeof(this.group_tag2) != "undefined" && this.group_tag2 != null && this.group_tag2 != "")
				{
					this.group_tag_lock_02=true
				}
				if(typeof(this.group_tag3) != "undefined" && this.group_tag3 != null && this.group_tag3 != "")
				{
					this.group_tag_lock_03=true
				} 
				
				console.log(this.group_tag1)
				console.log(this.group_tag2)
				console.log(this.group_tag3)
				
				console.log(this.group_tag_lock_01)
				console.log(this.group_tag_lock_02)
				console.log(this.group_tag_lock_03)
				
			},
			

			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				//this.$refs.uForm.setRules(this.rules)
			},

		},



	}
</script>



<style scoped lang="scss">
	@import url("asset/style.css");
</style>